<template>
  <el-container>
    <el-header style="height: 100%">
      <div class="pd-10">
        <el-row :gutter="10">
          <el-col :span="4">
            <a href="#" class="showItemA">
              <div class="showItemText">
                <p>总用户量(人)</p>
                <p>{{ UserCount }}</p>
              </div>
            </a>
          </el-col>
          <el-col :span="4">
            <a href="#" class="showItemA">
              <div class="showItemText">
                <p>封禁账户(人)</p>
                <p>{{ UserDisabledCount }}</p>
              </div>
            </a>
          </el-col>
          <el-col :span="4">
            <a href="#" class="showItemA">
              <div class="showItemText">
                <p>昨日注册(人)</p>
                <p>{{ UserYesterdayRegister }}</p>
              </div>
            </a>
          </el-col>
        </el-row>
      </div>

      <div class="pd-10">
        <el-input style="width: 200px" suffix-icon="el-icon-edit" placeholder="请输入用户名"
                  v-model="username"></el-input>
        <el-input class="ml-5" style="width: 200px" suffix-icon="el-icon-message" placeholder="请输入邮箱"
                  v-model="email"></el-input>
        <el-input class="ml-5" style="width: 200px" suffix-icon="el-icon-position" placeholder="请输入手机号"
                  v-model="phone"></el-input>
        <el-button class="ml-5" icon="el-icon-search" type="primary" @click="load">搜索</el-button>
        <el-button type="warning" icon="el-icon-edit" @click="reset">重置</el-button>
        <el-button type="primary" icon="el-icon-circle-plus-outline" @click="add">新增
        </el-button>
      </div>
      <!--        <div style="margin:10px">-->
      <!--            <el-button type="danger" icon="el-icon-delete">批量删除</el-button>-->
      <!--            <el-button type="primary" icon="el-icon-upload2" >导入</el-button>-->
      <!--            <el-button type="primary" icon="el-icon-download" >导出</el-button>-->
      <!--        </div>-->
    </el-header>

    <el-main>
      <el-table :data="tableData" border stripe v-loading="loading" height="580">
        <el-table-column prop="userId" label="编号" width="80"></el-table-column>
        <el-table-column prop="username" sortable label="用户名" width="140"></el-table-column>
        <el-table-column prop="nickname" sortable label="昵称" width="140"></el-table-column>
        <el-table-column prop="email" label="邮箱" width="200"></el-table-column>
        <el-table-column prop="phone" label="电话" width="140"></el-table-column>
        <el-table-column prop="userAddress" label="地址" :formatter="userAddressFormat"></el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            width="120">
          <template slot-scope="scope">
            <el-button @click="edit(scope.row, true)" type="text" size="small">查看</el-button>
            <el-button @click="edit(scope.row, false)" type="text" size="small">编辑</el-button>
            <el-button style="color: #F56C6C" @click="delete(scope.row.userId)" type="text" size="small">封禁</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--        新增用户弹出框-->
      <el-drawer title="云视源-用户" :visible.sync="drawerVisible" :wrapperClosable="false" :size="'50%'" :destroy-on-close="true">
        <data-form :id="id" :readonly="readonly" @find-list="load" @close="drawerVisible = false"></data-form>
      </el-drawer>
    </el-main>

    <el-footer>
      <div class="pd-10">
        <!--          current-page: 当前的页码
                      page-size: 每页的个数
        -->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[20 ,40, 80, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </div>
    </el-footer>

  </el-container>
</template>

<script>
import DataForm from '@/views/user/Form'
export default {
  name: "User",
  components: {
    DataForm: DataForm
  },
  data() {
    return {
      loginStatus: true,
      UserCount: 0,
      UserDisabledCount: 0,
      UserYesterdayRegister: 0,
      loading: true,
      tableData: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      username: "",
      email: "",
      phone: "",
      id: '',
      readonly: false,
      drawerVisible: false
    }
  },
  created() {
    this.load()
  },
  methods: {
    load() {
      this.init();
      this.FindUserCount();
      this.FindUserDisabledCount();
      this.FindUserYesterdayRegister();
    },
    init() {
      this.loading = true
      this.$axios({
        method: "get",
        url: this.$api.FindUserPage,
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          username: this.username,
          email: this.email,
          phone: this.phone
        },
      }).then(res => {
        this.tableData = res.data.records
        this.total = res.data.total
        this.loading = false
      });
    },
    add () {
      this.readonly = false;
      this.id = '';
      this.drawerVisible = true;
    },
    edit (row, show) {
      this.add();
      this.id = row.userId;
      this.readonly = show;
    },
    //修改每页的条数
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.load()
    },
    //修改页码
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum
      this.load()
    },
    //搜索重置
    reset() {
      this.username = ""
      this.email = ""
      this.phone = ""
      this.load()
    },
    //用户地址解析
    userAddressFormat(row, column, cellValue, index) {
      let address = row.userAddress
      let cityInfo = row.userCityInfo
      if (address == null) {
        address = ""
      }
      if (cityInfo == null) {
        cityInfo = ""
      }
      return cityInfo + address
    },
    FindUserCount () {
      //获取所有用户量
      this.$axios({
        url: this.$api.FindUserCount,
        method: "get",
      }).then(res => {
        this.UserCount = res.data
      })
    },
    FindUserDisabledCount () {
      //获取已被禁用的用户数量
      this.$axios({
        url: this.$api.FindUserDisabledCount,
        method: "get",
      }).then(res => {
        this.UserDisabledCount = res.data
      })
    },
    FindUserYesterdayRegister () {
      //获取昨日注册人数
      this.$axios({
        url: this.$api.FindUserYesterdayRegister,
        method: "get",
      }).then(res => {
        this.UserYesterdayRegister = res.data
      })
    },
    //封禁一个用户
    delete (userId) {
      this.$confirm('此操作将封禁该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios({
          method: 'delete',
          url: this.$api.DeleteUser,
          headers: {'content-type': 'multipart/form-data'},
          data: {
            'userId': userId
          }
        }).then(res => {
          this.load();
          if (res.code == 500) {
            this.$notify.error('操作失败！' + res.msg);
          } else {
            this.$notify.success('用户封禁成功');
          }
        })
      }).catch(() => {
        this.$message.info('已取消删除');
      });
    }
  }
}
</script>

<style scoped>

</style>